<script setup lang="ts">
import { frameIn, menuClassification } from '../../../router/routes'
import { RouteRecordRaw, useRouter } from "vue-router"
import { Menu } from '@element-plus/icons-vue'

const router = useRouter()
let classificationList = [] as {id: number, title: string}[]
let menuList: RouteRecordRaw[] = [] as RouteRecordRaw[]

const initMenu = () => {
  menuList = frameIn[0].children as RouteRecordRaw[]
  classificationList = menuClassification
}

initMenu()

const toRoute = (path: string) => {
  router.push({
    path
  })
}
</script>

<template>
  <div class="container">
    <el-menu class="elMenu" unique-opened>
      <el-sub-menu :index="String(index)" v-for="(classItem, index) in classificationList">
        <template #title>
          <el-icon><Menu color="#4b5cc4" /></el-icon>
          <span>{{classItem.title}}</span>
        </template>
          <el-menu-item v-for="item in menuList.filter(item => item.meta.clsId === classItem.id)" :key="item.name" @click="toRoute(item.path)" :index="String(item.name)">
            <span style="margin: auto">{{item.meta.title}}</span>
          </el-menu-item>
      </el-sub-menu>
    </el-menu>

  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .elMenu {
    height: 100%;
  }
}
</style>
